<template>
    <div class="main">
        <div id="mapContainer" class="mapContainer"></div>       
        <el-card class="status">
            <div slot="header" class="clearfix header-content">
                <span class="header-title">停车场车位状态</span>
            </div>
            <div class="text item">
                <div >
                    <span class="status-point-no"></span>
                    <span class="custom-label">空闲车位：{{ noCar2 }}个</span>
                </div>
                <div style="margin-top: 10px;">
                    <div class="status-point-have"></div>
                    <span class="custom-label_2">占用车位：{{ haveCar2 }}个</span>
                </div>
                 <div style="margin-top: 10px;">
                    <div class="status-point-name"></div>
                    <span class="carname">名称：{{ name }}</span>
                 </div>
            </div>
        </el-card>
    </div>    
</template>




<script>
import { listEsmap } from "@/api/parkingcar/esmap";


export default {
    data() {
        return {
            esmapList: [],
            havecars: [],
            nocar: [],
            haveCar2:'',
            noCar2:'',
            name:'',
            popMarker:'',
            queryParams: {
                pageNum: 1,
                pageSize: 200,
            },
        }
    },
    mounted() {
        setTimeout(() => { this.initMap() }, 1000);
        this.getList();


    },
    methods: {
        //初始化地图
        initMap() {
            var map = new esmap.ESMap({
                container: document.getElementById("mapContainer"), //场景初始化容器
                mapDataSrc: '/esmap/data', //场景数据所在目录
                token: '10005'  //每个场景ID对应一个token,请根据实际情况修改

            })
            map.openMapById('10005')
            this.updatacolor(map);
            this.getnumber(map);

        },
        getList() {
            listEsmap(this.queryParams).then(response => {
                this.esmapList = response.rows;
                for (var i = 0; i < this.esmapList.length; i++) {
                    if (this.esmapList[i].status == 1) {
                        this.havecars.push(this.esmapList[i].modelId)
                    } else {
                        this.nocar.push(this.esmapList[i].modelId)
                    }
                }           
            });
        },
        updatacolor(map) {
            for (var i = 0; i < this.havecars.length; i++) {                
                map.on('loadComplete', () => {
                    map.changeModelColor({
                        id: this.havecars,
                        color: 'red'
                    })
                })
            }
            this.haveCar2 = this.havecars.length;
            for (var i = 0; i < this.nocar.length; i++) {
                map.on('loadComplete', () => {
                    map.changeModelColor({
                        id: this.nocar,
                        color: 'green'
                    })
                })

            }
            this.noCar2 = this.nocar.length;
        },
        getnumber(map){
            map.on('mapClickNode',  (event) => {
                console.log(event); 
                 this.name = event.name;
                //通过event.nodeType判断点击到的是哪种类型的元素 类型列表请参考 esmap.ESNodeType
                if (event.nodeType == esmap.ESNodeType.IMAGEMARKER) {
                    console.log('点击到了图片标注:', event);
                }
            })
        }

    }

}
</script>

<style>
.main {
    position: relative;
}

.mapContainer {
    position: relative;
    z-index: 1;
}

.status {
    position: absolute;
    width: 180px;
    height: 150px;
    top: 20px;
    right: 20px;
    z-index: 10;
    
}

.header-title {
    margin-bottom: 10px;
}

.radio-item {
    margin-top: 5px;
}

.text {
    font-size: 14px;
}

.custom-label {
    color: #0c0c0c;
    margin-left: 5px;
    margin-top: 10px;
}

.custom-label_2{
    color: #0c0c0c;
    margin-left: 5px;
    margin-top: 10px;
}

.item {
    margin-bottom: 18px;
}

.text.item .el-radio+.el-radio {
    margin-top: 10px;
    /* 调整为你需要的间隔大小 */
}

.status-point-no {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #00ff84; /* 可以根据需要更改颜色 */
    vertical-align: middle;
}

.status-point-have {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ff0000; /* 可以根据需要更改颜色 */
    vertical-align: middle;
}

.status-point-name{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #7700ff; /* 可以根据需要更改颜色 */
    vertical-align: middle;
}

.carname{
    float: right;
    margin-right: 15px;
    margin-top: -2px;
}


</style>